<template>
  <div class="geren">
    <img :src="user.image || 'https://pic.bangbangtongcheng.com/static/my/header.png'
      " />

    <user-label :userInfo="userInfo" style="margin-top: 8px"> </user-label>
    <!-- <div class="identity-wrap">
      <template v-if="userInfo.isShop == 1">
        <div class="identity" style="margin-right: 8px">商家</div>
      </template>
      <template v-if="userInfo.businessType == 1">
        <div class="identity" v-if="userInfo.isAgent == 1">经纪人</div>
      </template>
      <template v-else>
        <div
          class="identity"
          v-if="
            userInfo.isAgent == 1 &&
              userInfo.shopType != 3 &&
              userInfo.shopType != 4
          "
        >
          经纪人
        </div>
      </template>
      <template
        v-if="
          userInfo.isShop == 0 &&
            userInfo.isAgent == 0 &&
            userInfo.enterpriseRecruitmentStatus == 0
        "
      >
        <div class="identity">个人</div>
      </template>
      <template
        v-if="
          userInfo.isShop == 0 &&
            userInfo.isAgent == 0 &&
            userInfo.enterpriseRecruitmentStatus == 1
        "
      >
        <div class="identity">企业</div>
      </template>
    </div> -->
    <template v-if="userInfo.isShop == 1">
      <div v-if="userInfo.isAgent == 1 || userInfo.isShop == 1" style="
          color: #333333;
          font-size: 18px;
          text-align: center;
          margin-top: 12px;
          font-weight: 600;
          margin-bottom: 12px;
        ">
        {{ myName || user.nikeName || "未命名用户" }}
      </div>
    </template>
    <template v-else>
      <p>欢迎你 {{ myName || userInfo.nikeName || "未命名用户" }}</p>
    </template>

    <div class="vip-level pointer" @click="toClick(15)" :style="{
      backgroundColor: colors[userInfo.memberLevel - 1].bgColor,
      color: colors[userInfo.memberLevel - 1].wordColor,
      borderColor: colors[userInfo.memberLevel - 1].lineColor,
    }">
      {{ userInfo.memberLevelTitle }}
    </div>
    <div class="list">
      <!-- <div :class="xuan == 1?'li xuan':'li'" @click="toClick(1)" v-if="(user.isShop == 1 || user.isAgent == 1) && user.shopType != '2'">首页</div>
		  <div :class="xuan == 15?'li xuan':'li'" @click="toClick(15)">会员中心</div>
		  <div :class="xuan == 2?'li xuan':'li'" @click="toClick(2)" v-if="(user.isShop == 1 || user.isAgent == 1) && user.shopType != '2'">门店房源</div>
		  <div :class="xuan == 14?'li xuan':'li'" @click="toClick(14)" v-if="(user.isShop == 1 || user.isAgent == 1) && user.shopType != '2'">共享房源</div>
		  <div :class="xuan == 3?'li xuan':'li'" @click="toClick(3)">我的发布</div>
		  <div :class="xuan == 4?'li xuan':'li'" @click="toClick(4)">我的收藏</div>
		  <div :class="xuan == 5?'li xuan':'li'" @click="toClick(5)">浏览记录</div>
		  <div :class="xuan == 13?'li xuan':'li'" @click="toClick(13)" v-if="user.isShop == 1">我的认证</div>
		  <div :class="xuan == 6?'li xuan':'li'" @click="toClick(6)">举报管理</div>
		  <div :class="xuan == 7?'li xuan':'li'" @click="toClick(7)" v-if="user.isShop == 1  && user.shopType != '2'">经纪人管理</div> -->
      <!-- <div :class="xuan == 8?'li xuan':'li'" @click="toClick(8)">个人中心</div> -->
      <!-- 
		  <div :class="xuan == 10?'li xuan':'li'" @click="toClick(10)">我的工具</div>
		  <div :class="xuan == 11?'li xuan':'li'" @click="toClick(11)" v-if="user.isShop == 1 || user.isAgent == 1">发布房源</div>
		  <div :class="xuan == 12?'li xuan':'li'" @click="toClick(12)" v-if="(user.isShop == 1 || user.isAgent == 1) && user.shopType != '2'">个人房源</div> -->
      <div class="li tag">我的管理</div>
      <template v-if="user.businessType == 2">
        <div :class="xuan == 1 ? 'li xuan' : 'li'" @click="toClick(1)" v-if="(user.isAgent == 1 || user.isShop == 1) &&
          user.shopType != 3 &&
          user.shopType != 4
          ">
          车源统计
        </div>
      </template>
      <template v-if="user.businessType == 1">
        <div :class="xuan == 1 ? 'li xuan' : 'li'" @click="toClick(1)"
          v-if="(user.isShop == 1 || user.isAgent == 1) && user.shopType != '2'">
          房源统计
        </div>
      </template>
      <div :class="xuan == 23 ? 'li xuan' : 'li'" @click="toClick(23)">
        我的发布
      </div>
      <div :class="xuan == 11 ? 'li xuan' : 'li'" @click="toClick(11)" v-if="user.isShop == 1 && user.shopType == '2'">
        楼盘信息
      </div>
      <!-- <div class="li" @click="toClick()">房源统计</div> -->
      <div :class="xuan == 18 ? 'li xuan' : 'li'" @click="toClick(18)">
        收藏关注
      </div>
      <div :class="xuan == 19 ? 'li xuan' : 'li'" @click="toClick(19)">
        历史记录
      </div>
      <div :class="xuan == 22 ? 'li xuan' : 'li'" @click="toClick(22)">
        上门看过
      </div>
      <div :class="xuan == 7 ? 'li xuan' : 'li'" @click="toClick(7)"
        v-if="user.businessType == 1 && user.isShop == 1 && user.shopType == 1">
        经纪人管理
      </div>
      <div :class="xuan == 16 ? 'li xuan' : 'li'" @click="toClick(16)" v-if="user.businessType == 2 &&
        user.isShop == 1 &&
        user.shopType != 3 &&
        user.shopType != 4
        ">
        经纪人管理
      </div>

      <div :class="xuan == 20 ? 'li xuan' : 'li'" @click="toClick(20)">
        举报管理
      </div>

      <div :class="xuan == 29 ? 'li xuan' : 'li'" @click="toClick(29)">
        帮友俱乐部
      </div>
      <!-- <div :class="xuan == 33 ? 'li xuan' : 'li'" @click="toClick(33)" v-if="user.merchantId && !user.merchantStaffId">
        会员管理
      </div> -->

      <div :class="xuan == 35 ? 'li xuan' : 'li'" @click="toClick(35)" v-if="(user.businessType != 0 && user.isShop == 1) ||
        user.businessType == 0 ||
        !user.businessType
        ">
        招才管理
      </div>
      <div :class="xuan == 26 ? 'li xuan' : 'li'" @click="toClick(26)"
        v-if="user.isAgent == 0 && user.enterpriseRecruitmentStatus != 1">
        我的委托
      </div>
      <template v-if="user.businessType == 1 && (user.isShop == 0 || user.isShop == 1 && user.shopType == '1')">
        <div class="li tag">房源中心</div>

        <div :class="xuan == 11 ? 'li xuan' : 'li'" @click="toClick(11)" v-if="user.isShop == 1 && user.shopType == '2'">
          发布房源
        </div>
        <div :class="xuan == 2 ? 'li xuan' : 'li'" @click="toClick(2)" v-if="user.isAgent == 1 && user.shopType == '1'">
          门店房源
        </div>
        <div :class="xuan == 14 ? 'li xuan' : 'li'" @click="toClick(14)"
          v-if="(user.isShop == 1 || user.isAgent == 1) && user.shopType != 2">
          共享房源
        </div>
        <div :class="xuan == 12 ? 'li xuan' : 'li'" @click="toClick(12)"
          v-if="(user.isAgent == 1 || user.isShop == 1) && user.shopType != 2">
          个人房源
        </div>
        <div :class="xuan == 26 ? 'li xuan' : 'li'" @click="toClick(26)" v-if="user.businessType == 1">
          委托房源
        </div>
      </template>

      <template v-if="user.businessType == 2">
        <div class="li tag" v-if="user.shopType != 3 && user.shopType != 4">
          车源中心
        </div>

        <div :class="xuan == 31 ? 'li xuan' : 'li'" @click="toClick(31)" v-if="user.isAgent != 0 && (user.shopType == '1' || user.shopType == '2')
          ">
          门店车源
        </div>
        <div :class="xuan == 32 ? 'li xuan' : 'li'" @click="toClick(32)" v-if="(user.isAgent == 1 || user.isShop == 1) &&
          user.shopType != 3 &&
          user.shopType != 4
          ">
          共享车源
        </div>
        <div :class="xuan == 24 ? 'li xuan' : 'li'" @click="toClick(24)" v-if="(user.isAgent == 1 || user.isShop == 1) &&
          user.shopType != 3 &&
          user.shopType != 4
          ">
          个人车源
        </div>
        <div :class="xuan == 26 ? 'li xuan' : 'li'" @click="toClick(26)" v-if="(user.isAgent == 1 || user.isShop == 1) &&
          user.shopType != 3 &&
          user.shopType != 4
          ">
          委托车源
        </div>
      </template>

      <div class="li tag">账户设置</div>
      <div :class="xuan == 17 ? 'li xuan' : 'li'" @click="toClick(17)">
        我的主页
      </div>
      <!-- <div :class="xuan == 13?'li xuan ':'li'" @click="toClick(13)">我的认证</div> -->
      <div :class="xuan == 15 && type == 'personal' ? 'li xuan ' : 'li'" @click="toClick(15, 'personal')">
        个人资料
      </div>
      <div :class="xuan == 15 && type == 'auth' ? 'li xuan ' : 'li'" @click="toClick(15, 'auth')" v-if="user.isAgent == 1 ||
        user.enterpriseRecruitmentStatus == 1 ||
        user.personalRecruitmentStatus == 1
        ">
        认证信息
      </div>
      <div :class="xuan == 15 && type == 'cancel' ? 'li xuan ' : 'li'" @click="toClick(15, 'cancel')">
        注销账号
      </div>
      <div :class="xuan == 34 ? 'li xuan ' : 'li'" @click="toClick(34)">
        屏蔽名单
      </div>
      <!-- 我的工具车主版 -->
      <div class="li tag">我的工具</div>
      <div :class="xuan == 9 ? 'li xuan' : 'li'" @click="toClick(9)">
        消息管理
      </div>
      <template v-if="(user.personalRecruitmentStatus == 1 && user.isShop != '1')">
        <div :class="xuan == 27 ? 'li xuan' : 'li'" @click="toClick(27)">
          我的工具
        </div>
      </template>
      <template v-else>
        <div :class="xuan == 27 ? 'li xuan' : 'li'" @click="toClick(27)">
          我的对比
        </div>
        <div :class="xuan == 30 ? 'li xuan' : 'li'" @click="toClick(30)">
          贷款计算器
        </div>
      </template>
      <div :class="xuan == 36 ? 'li xuan' : 'li'" @click="toClick(36)">
        我的喜好
      </div>
      <!-- <div :class="xuan == 25?'li xuan':'li'" @click="toClick(25)">委托评估</div> -->

      <!-- <div :class="xuan == 21 ? 'li xuan' : 'li'" @click="toClick(21)">
        问题反馈
      </div> -->
    </div>
    <div class="kuai"></div>
    <div v-show="issuestate" style="
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: #333333;
        z-index: 99999;
        opacity: 0.9;
      ">
      <div style="
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: 14%;
        ">
        <div style="display: flex; width: 20%; justify-content: space-between">
          <div style="
              display: flex;
              flex-direction: column;
              align-items: center;
              cursor: pointer;
            " @click="issue(1)">
            <img src="../assets/cs.png" />
            <div style="color: #ffffff; font-size: 30px; margin-top: 24px">
              出售
            </div>
          </div>
          <div style="
              display: flex;
              flex-direction: column;
              align-items: center;
              cursor: pointer;
            " @click="issue(2)">
            <img src="../assets/cz.png" />
            <div style="color: #ffffff; font-size: 30px; margin-top: 24px">
              出租
            </div>
          </div>
        </div>
        <i class="el-icon-circle-close" style="font-size: 30px; margin-top: 74px; cursor: pointer"
          @click="issuestate = false"></i>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  props: ["index"],
  data() {
    return {
      type: "",
      xuan: 1,
      user: {},
      issuestate: false,
      userInfo: {},
      colors: [
        {
          bgColor: "#E9EFEF",
          wordColor: "#60807D",
          lineColor: "#B6C4C3",
          level: "青铜会员",
        },
        {
          bgColor: "#F7F7F7",
          wordColor: "#A3AAB0",
          lineColor: "#D2D9E0",
          level: "白银会员",
        },
        {
          bgColor: "#FFF8DE",
          wordColor: "#CEAB21",
          lineColor: "#D3CAB2",
          level: "黄金会员",
        },
        {
          bgColor: "#EDFAFF",
          wordColor: "#59B0E6",
          lineColor: "#BBD0DB",
          level: "铂金会员",
        },
        {
          bgColor: "#F2F5FF",
          wordColor: "#284EB6",
          lineColor: "#C1CBEF",
          level: "钻石会员",
        },
        {
          bgColor: "#FDF7FF",
          wordColor: "#A877C6",
          lineColor: "#DBC6E8",
          level: "钻石Ⅰ会员",
        },
        {
          bgColor: "#F8F2FF",
          wordColor: "#78439F",
          lineColor: "#958AC3",
          level: "钻石Ⅱ会员",
        },
        {
          bgColor: "#F4F2F2",
          wordColor: "#8D4581",
          lineColor: "#907B8C",
          level: "钻石Ⅲ会员",
        },
        {
          bgColor: "#F4F2F2",
          wordColor: "#502E30",
          lineColor: "#795D5E",
          level: "王者会员",
        },
      ],
      authList: [],
    };
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.type = this.$route.query.type;
  },
  watch: {
    "$route.query.type": {
      handler(type, oldType) {
        if (!type || type == "personal") {
        } else if (type == "auth") {
        } else if (type == "cancel") {
        }
        this.type = type;
      },
    },
  },
  mounted() {
    this.xuan = this.index;
    this.getUser();
  },
  computed: {
    ...mapState({
      myName: (state) => state.user_name,
    }),
  },
  methods: {
    verifyAuth(authList, selfAuthList) { },
    getUser() {
      let user = localStorage.getItem("userInfo");
      if (user != null) {
        console.log("useruseruser", user);
        this.user = JSON.parse(localStorage.getItem("userInfo"));
        this.userInfo = JSON.parse(localStorage.getItem("userInfo"));

        if (!this.user.businessType) {
          //个人
        } else if (this.user.businessType == 1) {
          //房源
        } else if (this.user.businessType == 2) {
          //车源
        }
      } else {
        // this.$message({
        //   message: "请登录！",
        //   type: "error",
        //   offset: 120,
        //   duration: 2000,
        // });
        // this.$router.push("/");
      }
    },
    toClick(num, type) {
      console.log(num, "选择的");
      this.xuan = num;
      this.type = type;
      switch (num) {
        case 1:
          if (this.user.businessType == 1) {
            this.$router.push({
              path: "/my/index",
            });
          } else if (this.user.businessType == 2) {
            this.$router.push({
              path: "/my/bbcz/stat",
            });
          }
          break;
        case 2:
          this.$router.push({
            path: "/my/allhouses",
          });
          break;
        case 3:
          this.$router.push({
            path: "/my/issue",
          });
          break;
        case 4:
          this.$router.push({
            path: "/my/collect",
          });
          break;
        case 5:
          this.$router.push({
            path: "/my/browsing",
          });
          break;
        case 6:
          this.$router.push({
            path: "/my/inform",
          });
          break;
        case 7:
          this.$router.push({
            path: "/my/broker",
          });
          break;
        case 8:
          this.$router.push({
            path: "/my/personal",
          });
          break;
        case 9:
          this.$router.push({
            path: "/my/information",
          });
          break;
        case 10:
          this.$router.push({
            path: "/my/instrument",
          });
          break;
        case 11:
          if (this.user.shopType == "2" && this.user.isShop == "1") {
            this.$router.push({
              path: "/my/premises2",
            });
            console.log("发布楼盘");
          } else if (this.user.isShop == "1" && this.user.shopType == "1") {
            console.log("发布商家");
            this.$router.push({
              path: "/my/isshouse",
            });
          } else if (this.user.isAgent == "1") {
            console.log("发布经纪人");
            this.$router.push({
              path: "/my/isshouse",
            });
          } else {
            //this.issuestate = true
          }
          break;
        case 12:
          this.$router.push({
            path: "/my/perHouse",
          });
          break;
        case 13:
          this.$router.push({
            path: "/my/myCertification",
          });
          break;
        case 14:
          this.$router.push({
            path: "/my/shareHouse",
          });
          break;
        case 15:
          this.$router.push({
            path: "/my/bbcz/bbczpersonal?type=" + type,
          });
          break;
        case 16:
          this.$router.push({
            path: "/my/bbcz/bbczbroker",
          });
          break;
        case 17:
          if (
            this.user.businessType == 1 &&
            this.user.isShop == 1 &&
            this.user.shopType == 2
          ) {
            //楼盘
            this.$router.push({
              //我的主页
              path: "/index/storeyDetails",
              query: {
                id: this.user.buildingsId || this.user.shopId || '',
              },
            });
            return;
          }
          this.$router.push({
            //我的主页
            path: "/my/bbcz/myHomepage",
          });
          break;
        case 18:
          this.$router.push({
            path: "/my/bbcz/collectgz",
          });
          break;
        case 19:
          this.$router.push({
            path: "/my/bbcz/historyCZ",
          });
          break;
        case 20:
          this.$router.push({
            path: "/my/bbcz/reportManagement",
          });
          break;
        case 21:
          this.$router.push({
            path: "/my/bbcz/problemFeedback",
          });
          break;
        case 22:
          this.$router.push({
            path: "/my/bbcz/doorSeen",
          });
          break;
        case 23:
          this.$router.push({
            path: "/my/bbcz/wdRelease",
          });
          break;
        case 24:
          this.$router.push({
            path: "/my/bbcz/personalHous",
          });
          break;
        case 25:
          this.$router.push({
            path: "/my/bbcz/commissionAssessment",
          });
          break;
        case 26:
          this.$router.push({
            path: "/my/bbcz/commissionRental",
          });
          break;
        case 27:
          this.$router.push({
            path: "/my/bbcz/myToolCz",
          });
          break;

        case 28:
          this.$router.push({
            path: "/my/shareHouse",
          });
          break;
        case 29:
          // this.$router.push({
          // 	path:"/my/vipCenter",
          // })
          this.$router.push({
            path: "/my/vipCenterCopy",
          });
          break;
        case 30: //贷款计算器
          this.$router.push({
            path: "/my/bbcz/loanCalculator",
          });
          break;
        case 31: //全部车源
          this.$router.push({
            path: "/my/bbcz/allOptions",
          });
          break;
        case 32: //共享车源
          this.$router.push({
            path: "/my/bbcz/shareCar",
          });
          break;
        case 33: //会员管理
          this.$router.push({
            path: "/my/membershipManagement",
          });
        case 34: //屏蔽名单
          this.$router.push({
            path: "/my/blockList",
          });
          break;
        case 35: //招财管理
          this.$router.push({
            path: "/my/inviteManage",
          });
          break;

        case 36: //我的喜好
          this.$router.push({
            path: "/my/beFondOf",
          });
          break;
      }
    },
    issue(type) {
      if (type == 1) {
        this.$router.push({
          path: "/release/sell",
        });
      } else {
        this.$router.push({
          path: "/release/rent",
        });
      }
    },
    xuanClick(num) {
      this.xuan = num;
    },
  },
};
</script>
<style lang="less" scoped>
.geren {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 240px;
  min-height: 820px;
  margin-right: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;

  img {
    margin: 0 auto;
    display: block;
    width: 126px;
    height: 126px;
    border-radius: 50%;
    margin-top: 28px;
  }

  p {
    width: 100%;
    text-align: center;
    font-size: 18px;
    color: #333333;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .vip-level {
    width: 80px;
    margin: 0 auto 15px;
    text-align: center;
    padding: 4px 0;

    border: 1px solid #bd90d9;
    border-radius: 4px 4px 4px 4px;
    font-size: 15px;
    background: #f6f0ff;
    font-weight: 500;
    color: #bd90d9;
  }

  .list {
    margin-top: 24px;
    margin-bottom: 24px;
    position: relative;
    width: 100%;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .li {
      width: 100%;
      text-align: center;

      height: 48px;
      line-height: 48px;
      // margin-left: 30px;
      // text-indent: 40px;
      font-size: 18px;
      color: #333;
      margin-bottom: 6px;
      cursor: pointer;
      position: relative;
    }

    .tag {
      width: 208px;
      height: 48px;
      background-color: #64b6a8;
      color: #fff;
      border-radius: 6px;
    }

    .xuan {
      background-color: #dcefec;

      &::before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 5px;
        height: 48px;
        background: #64b6a8;
      }
    }
  }

  .kuai {
    width: 100%;
    height: 6px;
    background-color: #64b6a8;
    position: absolute;
    bottom: 0;
  }
}

.pointer {
  cursor: pointer;
}
</style>
